<!--  -->
<template>
    <div>
        <div class="cont">
            <div class="search">
                <img src="../../assets/images/home/search.png" alt="">
                <input type="text" placeholder="请输入搜索内容">
                <button class="btnsearch">搜索</button>
            </div>
            <div class="choiceness">
                <div class="nav">
                    <p>分类页一级分类</p>
                    <ul>
                        <li>Iphone</li>
                        <li>三星 Galaxy S 系列</li>
                        <li>三星 Galaxy Z 系列</li>
                        <li>Google</li>
                        <li>华为</li>
                        <li>耳机</li>
                        <li>airPods</li>
                        <li>所有手表</li>
                        <li>Apple Watch</li>
                    </ul>
                    <hr />
                    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        style="border:0px">
                        <el-submenu index="1">
                            <template slot="title">
                                <span>三级分类（可多选）</span>
                            </template>
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="动物"></el-checkbox>
                                <el-checkbox label="兔子"></el-checkbox>
                                <el-checkbox label="蝴蝶"></el-checkbox>
                                <el-checkbox label="相机"></el-checkbox>
                            </el-checkbox-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <span>印花风格</span>
                            </template>
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="动物"></el-checkbox>
                                <el-checkbox label="兔子"></el-checkbox>
                                <el-checkbox label="蝴蝶"></el-checkbox>
                                <el-checkbox label="相机"></el-checkbox>
                            </el-checkbox-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <span>精选系列</span>
                            </template>
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="动物"></el-checkbox>
                                <el-checkbox label="兔子"></el-checkbox>
                                <el-checkbox label="蝴蝶"></el-checkbox>
                                <el-checkbox label="相机"></el-checkbox>
                            </el-checkbox-group>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <span>艺术家设计</span>
                            </template>
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="动物"></el-checkbox>
                                <el-checkbox label="兔子"></el-checkbox>
                                <el-checkbox label="蝴蝶"></el-checkbox>
                                <el-checkbox label="相机"></el-checkbox>
                            </el-checkbox-group>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <span>印花风格</span>
                            </template>
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="动物"></el-checkbox>
                                <el-checkbox label="兔子"></el-checkbox>
                                <el-checkbox label="蝴蝶"></el-checkbox>
                                <el-checkbox label="相机"></el-checkbox>
                            </el-checkbox-group>
                        </el-submenu>
                    </el-menu>
                </div>
                <div class="navdetails">
                    <div v-for="index in 12" :key="index">
                        <img src="../../assets/images/home/图层 14.png" alt="">
                        <p>iPhone 15 Pro Max</p>
                        <p>MagSafe 兼容极致强韧防摔手机壳</p>
                        <p>Feed Mel</p>
                        <p>￥502</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            checked: false,
            checkList: []
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    beforeMount() { }, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
}
</script>
<style lang="less" scoped>
.cont {
    margin: 0px 105px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;

    .search {
        width: 50%;
        height: 60px;
        background: #F9F9F9;
        border: 1px solid #F1F1F1;
        box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
        border-radius: 30px;
        margin: 30px 0px;
        overflow: hidden;
        display: flex;
        align-items: center;

        img {
            width: 25px;
            height: 25px;
            margin-left: 10px;
        }

        input {
            width: 82%;
            height: 100%;
            outline: none;
            border: 0;
            background-color: transparent;
            text-indent: 2em;
            font-size: 20px;
            font-weight: 400;
            color: #999999;
        }

        .btnsearch {
            width: 15%;
            height: 54px;
            background: #FF5757;
            border-radius: 30px;
            // font-size: 20px;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: 54px;
            border: 0;
            outline: 0;
        }
    }

    .choiceness {
        width: 100%;
        display: flex;

        .nav {
            width: 15%;

            p {
                font-size: 22px;
                font-weight: 400;
                color: #222222;
                line-height: 38px;
            }

            ul {
                li {
                    font-size: 20px;
                    font-weight: bold;
                    color: #222222;
                    line-height: 38px;
                }
            }

            .el-menu-vertical-demo {
                margin-top: 20px;

                .el-submenu__title {
                    padding: 0px !important;
                    font-size: 18px;
                    font-weight: bold;
                    color: #222222;
                    line-height: 38px;
                }

                .el-checkbox-group {
                    display: flex;
                    flex-direction: column;
                    font-size: 16px;
                    font-weight: 400;
                    color: #222222;
                    line-height: 38px;

                    .el-checkbox__label {
                        color: #222222;
                    }

                }
            }
        }

        .navdetails {
            width: 85%;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;

            div {
                width: 340px;

                img {
                    width: 100%;
                }

                p {
                    width: 100%;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 600;
                    color: #222222;
                    line-height: 20px;
                }
            }
        }
    }
}
</style>